<%@ page language="java" session="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@include file="./publicvar.jsp" %>

<%
//    String path = request.getScheme()+"://"+ request.getServerName()+request.getRequestURI();
    String path = request.getServerName(); //localhost:8090
    String pathScheme = request.getScheme(); //HTTP HTTPS
    request.setAttribute("urlPath",path);
    request.setAttribute("pathScheme",pathScheme);
%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/static/images/favicon.ico" />
    <meta name="baidu-site-verification" content="code-gAFSeDt9OE" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>
    <c:if test="${chatroom.userid == null && hasScope}">
        【${chatroom.title}】区域总聊天室
    </c:if>
    <c:if test="${chatroom.userid > 0 && hasScope}">
        ${chatroom.title}
    </c:if>
    <c:if test="${!hasScope}">
        您当前定位不属于该区域
    </c:if>
    - <%=shareTitle%></title>
    <meta name="description" content="大圈圈聊天室是基于Web在线附近聊天的应用，附近的人可以通过此聊天室随时咨询到附近人员流动、附近热榜、附近招工、附近美食、附近相约...等各种范围内的信息，让大家能时刻了解到附近范围内的信息。">
    <meta name="keywords" content="大圈圈聊天室，附近热榜聊天室，在线聊天,在线聊天室,附近的人,在线小区聊天室,在线交友,交友聊天,附近免费手工活拿回家,附近今天招工,附近相约,附近美食,附近的妇女,邻居也疯狂,邻居人妻">
    <link rel="stylesheet" href="/static/css/index.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<%--    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>--%>
<%--    <script type="text/javascript" src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>--%>

<c:if test="${hasScope}">
    <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

    <script type="text/javascript">
        $(function(){
            var windowHeight = $(window).height() - $(".chatDetails .chatDetails_head div").height() - $(".chatDetails .chatDetails_con .chatDetails_form").height() - 20;
            $("#contentList").css("max-height",""+windowHeight+"px");
            $("#contentList").scrollTop($("#contentList")[0].scrollHeight);

            //倒计时 才能触发输入框 发送信息
            var countDown = 5;
            $("#everyone").text(countDown+"s");
            var sendCountDown = setInterval(function(){
                countDown--;
                $("#everyone").text(countDown+"s");
                if(countDown === 0){
                    $(".chatDetails .chatDetails_con .chatDetails_form").removeClass("hover");
                    $("#everyone").text("发送");
                    clearInterval(sendCountDown);
                }
            },1000);

            //输入框自动增高
            //$(".chatDetails .chatDetails_con .chatDetails_form").removeClass("hover");
            var inputHeight = $("#sendContent").height();
            $("#sendContent").on("input propertychange",function(){
                var inputText = $(this).val().trim();
                if(inputText.length > 0){
                    $("#everyone").addClass("active");
                }else{
                    $("#everyone").removeClass("active");
                }
                $(this).css("height",""+inputHeight+"px");
                var inputScrollHeight = this.scrollHeight;
                $(this).css("height",inputScrollHeight);
            });


            var websocket = null;
            if ('WebSocket' in window) {
                websocket = new WebSocket("wss://${urlPath}/websocket/socketServer");
            }else if ('MozWebSocket' in window) {
                websocket = new MozWebSocket("wss://${urlPath}/websocket/socketServer");
            }else {
                websocket = new SockJS("${pathScheme}://${urlPath}/sockjs/socketServer");
            };
            websocket.onopen = function(openEvt){
                <%--//当WebSocket创建成功时，触发onopen事件
                //console.log(openEvt)--%>
                console.log("开始连接了");
            };
            websocket.onmessage = function(e){
                <%-- // 当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
                 //console.log(e);--%>
                 var message = e.data.split("#${chatroom.id}");
                 $("#contentList").append('<li><b>'+message[1]+'：</b><p>'+message[0]+'</p></li>');
                 $("#peopleSize").text('当前'+message[2]+'人在线');
             };
             websocket.onclose = function(e){
                 <%--//当客户端收到服务端发送的关闭连接请求时，触发onclose事件--%>
                 console.log("收到服务端发送的'关闭连接请求'时");
             };
             websocket.onerror = function(e){
                 <%--//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件--%>
                 console.log(e);
                 //websocket.close();
             };

            // $('#sendContent').bind('DOMNodeInserted', function() {
            //     $("#everyone").addClass("active");
            // });
            // $('#sendContent').bind('DOMNodeRemoved', function() {
            //     $("#everyone").removeClass("active");
            // });

            $("#everyone").on("click",function(){
                 if (websocket.readyState == websocket.OPEN) {
                     var msg = $("#sendContent").val().trim();
                     if(msg != ""){
                         websocket.send("#everyone#"+msg);//调用后台handleTextMessage方法
                         $("#sendContent").val("");
                         $("#everyone").removeClass("active");
                         $("#contentList").append('<li class="active"><b>我：</b><p>'+msg+'</p></li>');
                         $("#contentList").scrollTop($("#contentList")[0].scrollHeight);
                     }else{
                         $("#sendContent").val("");
                         $("#everyone").removeClass("active");
                     }
                 } else {
                     alert("当前‘聊天室’连接已关闭，请'返回'重新进入!");
                 }
             });

             <%--
             $("#websocketClose").on("click",function(){
                 websocket.close();
             });
             --%>
        });

    </script>
</c:if>




</head>
<body>

<div class="chatDetails">

<c:if test="${hasScope}">
    <div class="chatDetails_head">
        <div>
            <i onclick="javascript:window.history.go(-1)"><img src="/static/images/ico02.png" /></i>
            <p><b>
                <c:if test="${chatroom.userid == null}">
                    【${chatroom.title}】区域聊天室
                </c:if>
                <c:if test="${chatroom.userid > 0}">
                    ${chatroom.title}
                </c:if>
                </b>
                <em id="peopleSize">当前${chatroom.onlineusers}人在线</em>
            </p>
        </div>
    </div>

    <div class="chatDetails_con">
        <div class="context">
            <ul id="contentList">
<%--                <li>--%>
<%--                    <b>用户888：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li class="active">--%>
<%--                    <b>我：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <b>用户888：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li class="active">--%>
<%--                    <b>我：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <b>用户888：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li class="active">--%>
<%--                    <b>我：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <b>用户888：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li class="active">--%>
<%--                    <b>我：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <b>用户888：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li class="active">--%>
<%--                    <b>我：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li>--%>
<%--                    <b>用户888：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
<%--                <li class="active">--%>
<%--                    <b>我：</b>--%>
<%--                    <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或哈哈哈哈哈哈哈或或或或或或或或</p>--%>
<%--                </li>--%>
            </ul>
            <div class="chatDetails_form hover">
<%--                <div class="textarea" id="sendContent"></div>--%>
                <textarea class="textarea" id="sendContent"></textarea>
                <button id="everyone" class="">发送</button>
            </div>
        </div>
    </div>

<%--    <button id="everyone">群发</button>--%>
<%--    <button id="websocketClose">关闭连接</button>--%>
</c:if>

<c:if test="${!hasScope}">
    <div class="noChat">
        <div class="noChat_head">
            <i onclick="javascript:window.history.go(-1)"><img src="/static/images/ico02.png" /></i>
            <p>您当前定位不属于该区域</p>
        </div>
        <h2>您当前定位<b>不属于该区域</b></h2>
        <a href="/chat/index">回到首页</a>
    </div>
</c:if>


</div>
<img src="/static/images/logo.jpg" width="0" height="0" alt="大圈圈(daquanquan.ren)，我时刻就在您身边" style="display:block;width:0px; height:0px; overflow:hidden;"/>
</body>
</html>














<%--<script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>--%>
<%--<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>--%>
<%--<script type="text/javascript" src="/static/js/sockjs.min.js"></script>--%>


